<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例4</title>
    <style>
        .msg{
            color: red;
            font-weight: bold;
            font-size: 14px;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        function checkEmail(){
            const email = $("#email").val()

            $("#email_msg").text("")

            if(email == ""){
                $("#email_msg").text('邮箱不能为空')
                return false;
            }else if(email.indexOf("@")==-1 || email.indexOf(".")==-1){
                $("#email_msg").text("邮箱格式不对，必须包含@和.");
                return false;
            }

            return true;
        }

        function checkPassword(){
            const password = $("#password").val()

            $("#password_msg").text("")

            if(password == ""){
                $("#password_msg").text("密码不能为空");
                return false;
            }else if(password.length<8){
                $("#password_msg").text("密码必须大于或等于8个字符");
                return false;
            }

            return true;
        }

        $(function (){
            $("#myform").submit(function (){
                //短路与
                const r1 = checkEmail();
                const r2 = checkPassword();
                return r1 && r2;
            })

            $("#email").blur(function (){
                checkEmail();
            })

            $("#password").blur(function (){
                checkPassword();
            })
        })

    </script>
</head>
<body>
    <form id="myform" action="success.html">
        <p>
            邮箱 <input id="email"/>
            <span class="msg" id="email_msg"></span>
        </p>
        <p>
            密码 <input id="password"/>
            <span class="msg" id="password_msg"></span>
        </p>
        <p>
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </p>
    </form>
</body>
</html>